<!--suppress ALL -->
<include file="./Template/header.html" />
<link rel="stylesheet" type="text/css" href="/Template/css/weui.min.css">
<link rel="stylesheet" type="text/css" href="/Template/css/common.css">
<link rel="stylesheet" type="text/css" href="/Template/css/paySuccessPage.css">
<script type="text/javascript" src="/Template/js/amazeui.js"></script>
<script type="text/javascript">

    $(function() {

        //初始化页面配置
        document.title = "购买成功";

        var app = new Vue({
            el: '#container',
            data: {
                groupList: [],
            },
            methods: {
                index: indexPage,
                order: orderPage,
                rank: rankPage,
                center: centerPage,
                jump: function(url) {
                    window.location.href = url;
                },
            }
        })

        $(".body-bg").on('click', function() {
        	$(".body-bg").hide();
        	$(".pay-success-share").hide();
            $(".share-success-frame").hide();
        })

        $('.go-home-btn').on('click', function() {
            window.location.href = '/wechat/index/index';
        })

        $('.share-btn').on('click', function() {
            $(".pay-success-share").show();
            $(".share-success-frame").hide();
        })

        function bindCountDown() {
            var endtime = $(".my-team-deadtime").attr("endtime");
            setInterval(function() {

                //var endTime = new Date(endtime.replace(/-/g,"/"));
                var ua = navigator.userAgent.toLowerCase();	
				if (/iphone|ipad|ipod/.test(ua)) {
					var endTime = safariDate(endtime);	
				} else if (/android/.test(ua)) {
					var endTime = new Date(endtime.replace(/-/g,","));		
				}
                var timeGap = getTimeGap(new Date(), endTime, "hours");

                if (timeGap["hours"] == undefined || timeGap["minutes"] == undefined || timeGap["seconds"] == undefined) {
                    $(".my-team-deadtime").html("还剩00:00:00结束");
                }else{
                    $(".my-team-deadtime").html(
                    "还剩"+
                    timeGap["hours"]+":"+
                    timeGap["minutes"]+":"+
                    timeGap["seconds"]
                    +"结束");
                }

            }, 1000);
        }


        bindCountDown();

        $(".deadtime[status=0]").each(function() {
            $(this).attr("status", 1);
            bindReferCountDown($(this));
            bindProgress();
        });
        

        function bindReferCountDown(obj) {
            var endtime = obj.attr("endtime");
            
            setInterval(function() {

                //var endTime = new Date(endtime.replace(/-/g,"/"));
                var ua = navigator.userAgent.toLowerCase(); 
                if (/iphone|ipad|ipod/.test(ua)) {
                    var endTime = safariDate(endtime);  
                } else if (/android/.test(ua)) {
                    var endTime = new Date(endtime.replace(/-/g,","));      
                }
                var timeGap = getTimeGap(new Date(), endTime, "hours");

                if (timeGap["hours"] == undefined || timeGap["minutes"] == undefined || timeGap["seconds"] == undefined) {
                    obj.html("倒计时：00:00:00");
                }else{
                    obj.html(
                    "倒计时："+
                    timeGap["hours"]+":"+
                    timeGap["minutes"]+":"+
                    timeGap["seconds"]);
                }

            }, 1000);
        }

        function bindProgress() {

            $('.other-info-padding-right').each(function() {

                $(this).attr("progress", 1);

                var total = $(this).attr("total");
                var join = $(this).attr("join");
                
                var proportion = parseFloat(join/total);
                var progressImg = $(this).children('.progress-img').width();
                var progressImgRed = $(this).children('.progress-img-red').width(progressImg*proportion);
                $(this).children('.progress-img-red').css('width',progressImgRed);

            })

        }
        
  //       if($(".other-info-padding-right").length > 0) {
  //           bindReferCountDown();
  //           bindProgress();
		// }

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '{$appid}', // 必填，公众号的唯一标识
            timestamp: '{$signature.timestamp}', // 必填，生成签名的时间戳
            nonceStr: '{$signature.noncestr}', // 必填，生成签名的随机串
            signature: '{$signature.signature}', // 必填，签名，见附录1
            jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function(){

            var shareData = {
                imgUrl    :    '{$order.image}',
                link     :     '{$shareUrl}',
                title     :    '{$order.product_name}',
                desc     :     '{$order.brief}',
                success: function() {
                    $(".body-bg").show();
                    $(".pay-success-share").hide();
                    $('.share-success-frame').show();
                }
            };

            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData);
        });

    });

    function waiting(id) {
        window.location.href = "/wechat/product/waitingGroup/id/"+id;
    }

    function join(id) {
        window.location.href = "/wechat/product/share/id/" + id;
    }

</script>

<div class="index">
	<div class="the-goods-info">
		<div class="my-pay-goods-img">
			<div style="background: url('{$order.image}')no-repeat center;background-size: cover;"></div>
		</div>
		<div class="my-pay-goods-infos">
			<p class="my-pay-goods-title">{$order.product_name}</p>
			<p class="my-team-number">{$order.price}份<span>1/件</span></p>
		</div>
	</div>
	<div class="has-pay-person-zone">
		<foreach name="order['member_list']" item="member">
			<if condition="$member['is_leader'] eq C('DEFAULT_YN.YES')">
				<div class="has-pay-person-img leader" style="background: url('{$member.headimgurl}')no-repeat center;background-size: cover;"></div>
			<else/>
				<div class="has-pay-person-img" style="background: url('{$member.headimgurl}')no-repeat center;background-size: cover;"></div>
			</if>
		</foreach>
	</div>
	<div class="my-pay-team">
		<p class="my-pay-team-info">您已成功购买<span>{$order.number}</span>份<if condition="($order['price'] - $order['join_number']) gt 0">,还差<span>{$order['price'] - $order['join_number']}</span>份<else/><br/><span>本轮购买数量已满，将立刻开团</span></if></p>
		<if condition="($order['price'] - $order['join_number']) gt 0">
            <div class="my-team-deadtime" endtime="{$order.end_time}">
    			还剩00:00:00结束
    		</div>
        <else/>
            <div class="my-team-deadtime" endtime="{$order.end_time}" style="display:none;">
                还剩00:00:00结束
            </div>
        </if>
		<div class="watch-my-team" onclick="waiting('{$order.round_id}')">查看全部参团信息>></div>
	</div>
	<div class="maybe-like">
		<p>你可能会喜欢</p>
	</div>
	<div class="team">
        <empty name="list">
            <div class="no-other-info">暂无推荐</div>
        <else/>
            <foreach name="list" item="referProduct">
        		<div class="team-list">
        			<div class="head-img-url-zone">
        				<foreach name="referProduct['member_list']" item="member">
        					<if condition="$member['is_leader'] eq C('DEFAULT_YN.YES')">
        						<div class="head-img-url leader" style="background: url('{$member.headimgurl}')no-repeat center;background-size: cover;"></div>
        					<else/>
        						<div class="head-img-url" style="background: url('{$member.headimgurl}')no-repeat center;background-size: cover;"></div>
        					</if>
        				</foreach>
        			</div>
        			<div class="other-info">
    					<div class="other-info-padding-left">
    						<div class="the-goods-title">{$referProduct.product_name}</div>
    						<p class="join-name"><span class="wexin-name">{$referProduct.nickname}</span>的团</p>
    						<p class="join-num">目前团员人数 <span>{$referProduct.member_number}人</span></p>
    						<p class="join-count">全团持劵 <span>{$referProduct.buy_number}份</span></p>
    						<div class="join-team-btn">
    							<p onclick="join('{$referProduct.group_id}')">加入此团</p>
    						</div>
    					</div>
    					<div class="other-info-padding-right" progress="0" total="{$referProduct['price']}" join="{$referProduct['join_number']}">
    						<div class="the-goods-img" style="background: url('{$referProduct.image}')no-repeat center;background-size: cover;"></div>
    						<div class="deadtime" status="0" endtime="{$referProduct.end_time}">倒计时：<span class="countDown">正在计算</span></div>
    						<div class="progress-img"></div>
    						<div class="progress-img-red"></div>
    						<div class="open-progress">还差{$referProduct['price'] - $referProduct['join_number']}</div>
    						<div class="leftperson">总价{$referProduct.price}</div>
    					</div>
        			</div>
        		</div>
            </foreach>
        </empty>
	</div>
</div>
<div class="body-bg"></div>
<div class="pay-success-share">
	<div class="pay-share-icon"></div>
	<div class="share-deadtime my-team-deadtime" endtime="{$order.end_time}">剩余：00:00:00</div>
	<p class="share-content">仅剩<span>{$order['price'] - $order['join_number']}</span>个幸运号码，赶快邀请好友入团！一人中奖，全团中奖！</p>
	<p class="share-remind-info"></p>
</div>
<div class="share-success-frame">
    <div class="share-success-title">
        <i class="share-success-icon"></i>
        <div>分享成功</div>
    </div>
    <p class="go-on-share">邀请团员越多，团胜概率越大！</p>
    <div class="share-btn">
        <p>继续邀请</p>
    </div>
    <div class="line">
        <p>获胜攻略</p>
    </div>
    <p class="share-word">鸡蛋不要放在一个篮子里，再去开一个团</p>
    <div class="go-home-btn">
        <p>前往去开团首页</p>
    </div>
</div>